import './index.scss'
import { useState, useEffect } from 'react'
import { Swiper, SearchBar, Card, InfiniteScroll, List } from 'antd-mobile'
import { connect } from 'react-redux'
import { getPrivateMusic } from '../../api/index'
import { getBanner } from '../../store/actionCreator'
import { renderRoutes } from 'react-router-config'
function Home(props) {
    const { banner, getRecommendBanner, history } = props
    let [type] = useState(1)
    const [newSong, setNewsong] = useState([])
    let [hasMore, setHasmore] = useState(true)
    let [offset, setOffset] = useState(0)

    console.log(props);

    const getRecommendNewSongs = (offset) => {
        let payData = {
            limit: 10,
            offset
        }
        getPrivateMusic(payData).then((res) => {
            console.log(res);
            if (res.code === 200) {
                setHasmore(res.more)
                setNewsong(val => [...val, ...res.data])
            }

            console.log(newSong);
        })
    }
    const loadMore = () => {
        if (hasMore) {
            setOffset(offset + 1)
            return getRecommendNewSongs(offset)
        }

    }
    useEffect(() => {
        if (!banner.length) {
            getRecommendBanner(type)
        }
        // eslint-disable-next-line
    }, [])
    useEffect(() => {
        console.log('ssss');
        if (!newSong.length) {
            getRecommendNewSongs(offset)
        }
        // eslint-disable-next-line
    }, [])
    const handleEnter = (id) => {
        if (id) {
            history.push(`/home/${id}`)
        }
        return
    }
    const items = banner.map((item, index) => (
        <Swiper.Item key={index}>
            <div className='img-container'>
                <img width='100%' height='100%' alt='' src={item.pic}></img>
            </div>
        </Swiper.Item>
    ))
    const CardItem = newSong.map((item, index) => {
        return (
            <Card key={index} title={item.name} onClick={() => {
                handleEnter(item.id)
            }}>
                <div>
                    <img width='60px' height='60px' src={item.cover} alt="" />
                </div>
            </Card>
        )
    })

    return (
        <div className='home'>
            <div className='home-search'>
                <SearchBar placeholder='请输入内容' />
                <span className="iconfont iconliebiao"></span>
            </div>
            <div className='swiper-wrapper'>
                <Swiper>
                    {items}
                </Swiper>
            </div>
            <div className='recommend-container'>
                <List>
                    {CardItem}
                </List>
                <InfiniteScroll threshold='500' loadMore={loadMore} hasMore={hasMore} />

            </div>
            {renderRoutes(props.route.routes)}
        </div>
    )


}
const mapStateToProps = (state) => {
    return {
        banner: state.banner
    }
}
const mapActionToProps = (dispatch) => {
    return {
        getRecommendBanner(type) {
            const payData = {
                type
            }
            const action = getBanner(payData)
            dispatch(action)
        },
        // getRecommendNewSongs(offset) {
        //     const paydata = {
        //         limit: 10,
        //         offset
        //     }
        //     const action = getRecommendPrivateMusic(paydata)
        //     dispatch(action)
        // }
    }
}
export default connect(mapStateToProps, mapActionToProps)(Home) 